<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-body">
            <div style="display: flex;">
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">用户名:</div>
                  <div class="group_v">user1@stonedt.com</div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">加入时间:</div>
                  <div class="group_v">2021-10-13</div>
                </div>
              </div>
            </div>
            <div style="display: flex;">
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">用户角色:</div>
                  <div class="group_v">开发者1</div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="form-group row">
                  <div class="group_k">用户姓名:</div>
                  <div class="group_v">思通</div>
                </div>
              </div>
            </div>
            <div>
              <p>用户权限</p>
              <div class="table-responsive">
                <b-table
                  class="table-centered"
                  :items="ordersData"
                  :fields="fields"
                  responsive="sm"
                  :per-page="perPage"
                  :current-page="1"
                  thead-class="thead-light"
                >
                </b-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data () {
    return {
      items: [
        {
          text: "用户管理",
          url: "/user",
        },{
          text: "用户详情",
          url: "",
        }
      ],
      ordersData: [
        {
          modular: "资源管理",
          project: "-",
          authority: "无",
        },{
          modular: "日志管理",
          project: "正式环境，测试环境",
          authority: "无",
        }
      ],
      perPage: 10,
      fields: [
        { key: "modular", label: "功能模块" },
        { key: "project",  label: "功能项目" },
        { key: "authority",  label: "权限范围" },
      ],
    }
  }
}
</script>
<style lang="scss" scoped>
.butn{
  ::v-deep .btn{
    background-color: #252b3b;
    border-color: #252b3b;
    border-radius: 30px;
    display: flex;
    align-items: center;
  }
  ::v-deep .btn-secondary.focus {
    box-shadow: 0 0 0 0.15rem rgb(37 40 58 / 50%);
  }
}
.group_k{
  margin-right: 10px;
}
</style>
